<template>
    <div class="comp" @dblclick="reset">
        <!-- 放置图表的容器 -->
        <div class="echarts" ref="map">
        </div>
    </div>
</template>

<script>
// 引入转换中文 拼音的方法
import  getProvinceMapInfo from "../../public/static/map.js"
export default {
    data() {
        return {
            echartsInstance:null,//初始化echarts实例对象
            allData:[]//业务数据
        };
    },
    beforeDestroy(){
        // 销毁组件之前移除监听器
        window.removeEventListener('click',this.adapTive)
    },
    mounted() {
        // 1.echarts实例初始化 静态配置项设置 基础图表绘制
        this.initEcharts()
        // 2.监听窗口变化实现图表自适应
        window.addEventListener('resize',this.adapTive)
        // 3.调用适配方法
        this.adapTive()
    },
    methods: {
        // 1.echarts实例初始化 静态配置项设置 基础图表绘制
        async initEcharts(){
            // 1.1获取实例
            this.echartsInstance = this.$echarts.init(this.$refs.map,'dark')
            // 1.2获取绘制中国地图的经纬度数据
            let {data} = await this.$http.get('http://localhost:8080/static/map/china.json')
            // 1.3注册地理数据
            this.$echarts.registerMap('china',data)
            // 1.4设置绘图需要的静态配置项
            let initOptions={
                // 标题
                title:{
                    text:"▍各省区种植统计",
                    top:"3%",
                    left:"3%"
                },
                // 图表类型
                series:[
                    {
                        type:"map",
                        map:'china'
                    }
                ]
            }
            // 1.5绘制基础图表
            this.echartsInstance.setOption(initOptions)
            // 1.6获取业务数据
            this.getData()
            // 1.7监听用户的切换省份行为
            this.echartsInstance.on('click',async(info)=>{
                console.log(info.name)
                // 1.根据省份的中文名字来换取它的地理数据
                let {name,path} = getProvinceMapInfo(info.name)
                let {data} = await this.$http.get('http://localhost:8080'+path)
                // 2.注册地理数据切换省份地图
                this.$echarts.registerMap(name,data)
                this.echartsInstance.setOption({
                    series:[
                        {
                            map:name,
                            center:undefined,//自动识别地图的视觉中心
                            zoom:0.9,
                            itemStyle:{
                                areaColor:"orange"
                            },
                            label:{show:true}
                        }
                    ]
                })

            })
        },
        // 2.获取业务数据
        async getData(){
            let {data} = await this.$http.get("CropCoverage")
            this.allData = data.content;
            //根据业务继续完善图表
            this.setEcharts()
        },
        // 3.根据业务继续完善图表
        setEcharts(){
            // 1.设置绘图配置项
            let setOptions={
                // 图表类型
                series:[
                    {
                        data:this.allData,
                        top:"20%",
                        roam:true,//开启平移漫游
                        zoom:1.1//调整缩放比例
                    }
                ],
                // 配置映射组件
                visualMap:{
                    calculable:true,//显示拖拽手柄 
                    inRange: {
                        color: ['orange', 'orangered']
                    },
                    text:['High', 'Low'],
                    left:"3%",
                    bottom:"3%"
                }
            }
            // 2.setOption 合并多次的绘图配置项 完善图表
            this.echartsInstance.setOption(setOptions)
        },
        // 4.窗口适配方法
        adapTive(){
            // 通过比例尺的思想解决坐标系外的适配问题
                let width = this.$refs.map.offsetWidth;
                // 3.5-3.7
                let scale = width / 100 *3.6
                // 设置动态需要适配的配置项
                let adapOptions={
                    // 标题
                    title:{
                        textStyle:{
                            fontSize:scale
                        }
                    }
                }
                // 适配绘图
                this.echartsInstance.setOption(adapOptions)

            // 处理坐标系内的图表适配
                this.echartsInstance.resize()
        },
        reset(){
            // 还原中国地图
            this.echartsInstance.setOption({
                series:[
                    {
                        map:"china",
                        label:{show:false},
                        zoom:1.1,
                        center:undefined
                    }
                ]
            })
        }
    },
};
</script>

<style scoped>

</style>
